<html><head><meta charset="utf-8"><title>怎么调试 Webpack？-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/29" target="_blank">Webpack 从零入门到工程化实战</a>
                    <a href="" target="_blank">
                        <span>
                            / 4-1 怎么调试 Webpack？
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                怎么调试 Webpack？
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-25 17:21:36
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img.mukewang.com/5cd9643f0001e11806390358.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">宝剑锋从磨砺出，梅花香自苦寒来。<p class="author">——佚名</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在深入理解 Webpack 内核原理之前，我们先来学习下研究方法，即怎么调试 Webpack。我们都知道 Webpack 实际是 Node.js 编写的，执行的时候我们使用<code>webpack-cli</code>命令进行执行，所以我们可以利用 Node.js 的调试方法来调试 Webpack。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在这里我们不是使用<code>console.log</code>的方式来调试代码，而是使用<strong>断点</strong>的方式来调试 Webpack，配合 VSCode IDE 编辑器的调试面板来实现 Webpack 的 Debug。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><a href="https://code.visualstudio.com/">VSCode</a> 是一个基于 Electron 编写的 IDE，<a href="https://electronjs.org/">Electron</a> 是基于 Chromium 内置 Node.js 的一套桌面应用解决方案，通过它可以用 JavaScript、HTML 和 CSS 这些前端技术栈来创建桌面应用，并且 Electron 创建出来的桌面应用是支持跨端的！VSCode 和 Electron 都是开源的，感兴趣的可以去 Github 查看源码。本篇文章主要来介绍基于 VSCode 的调试面板来调试 Webpack，<strong>学会这个其实可以扩展到调试任意 Node.js 项目代码</strong>。</p>
</div><div class="cl-preview-section"><h2 id="前期准备" style="font-size: 30px;">前期准备</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先是先下载并安装 VSCode。我电脑是 Mac 系统，所以以 Mac 版本的 VSCode 为教程来介绍，Windows 版本并没有多少差异性；</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第二步是准备 Node.js 开发环境。我这里使用的是 10.15.3 LTS 版本的 Node.js（截稿最新版本是 Node.js 12，LTS 版本是 10.15.3），但是调试技巧都是通用的；</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">第三步是准备好 Webpack 和 Webpack-cli 工程项目。我们按照下面顺序来创建一个调试项目：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">创建一个<code>webpack-debug</code>的目录并且进入目录，Mac 命令行如下：<code>mkdir webpack-debug &amp;&amp; cd $_</code>；</li>
<li style="font-size: 20px; line-height: 38px;">创建<code>package.json</code>初始化 NPM 环境：<code>npm init -y</code>；</li>
<li style="font-size: 20px; line-height: 38px;">安装开发依赖：<code>npm install -D webpack webpack-cli</code>；</li>
<li style="font-size: 20px; line-height: 38px;">安装项目依赖，这里使用了<code>lodash</code>这个工具库：<code>npm install -S lodash</code>；</li>
<li style="font-size: 20px; line-height: 38px;">创建项目 Webpack 入口文件<code>src/index.js</code>和配置文件<code>webpack.config.js</code>，内容如下：</li>
</ol>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token comment">// src/index.js</span>
<span class="token keyword">import</span> _ <span class="token keyword">from</span> <span class="token string">'lodash'</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>_<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// webpack.config.js</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
    entry<span class="token punctuation">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span>
    output<span class="token punctuation">:</span> <span class="token punctuation">{</span>
        filename<span class="token punctuation">:</span> <span class="token string">'entry'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这时候我们执行<code>npx webpack</code>，执行成功：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d0767b70001c6e914440504.png" alt="图片描述" data-original="http://img.mukewang.com/5d0767b70001c6e914440504.png" class="" style="cursor: pointer;"><br>
下面来说下<code>npx webpack</code>做了什么事情。之前介绍下，<a href="https://www.npmjs.com/package/npx">npx</a>实际执行的是对应模块的 bin 命令，bin 命令是对应的 NPM 模块在模块安装（npm install）的时候通过<code>package.json</code>的<code>bin</code>字段指定的，<code>webpack</code>这个命令实际是通过<code>webpack-cli</code>来注入的。我们来看下<code>webpack-cli</code>的<a href="https://github.com/webpack/webpack-cli/blob/master/package.json#L10-L12"><code>package.json</code></a>：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token comment">// webpack-cli package.json</span>
<span class="token punctuation">{</span>
    <span class="token comment">// ...</span>
    <span class="token string">"bin"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"webpack-cli"</span><span class="token punctuation">:</span> <span class="token string">"./bin/cli.js"</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token string">"main"</span><span class="token punctuation">:</span> <span class="token string">"./bin/cli.js"</span><span class="token punctuation">,</span>
    <span class="token string">"engines"</span><span class="token punctuation">:</span> <span class="token punctuation">{</span>
        <span class="token string">"node"</span><span class="token punctuation">:</span> <span class="token string">"&gt;=6.11.5"</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// ...</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">所以实际我们执行<code>npx webpack</code>，跟执行<code>node ./node_modules/webpack-cli/bin/cli.js</code> 效果是一样的，知道这个我们就明白原来 Webpack 命令实际执行的就是<code>webpack-cli</code>项目中的<code>bin/cli.js</code>呢！</p>
</div><div class="cl-preview-section"><h2 id="使用-vscode-的调试功能" style="font-size: 30px;">使用 VSCode 的调试功能</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">了解了<code>webpack</code>执行命令的原理之后，我们再来看下 VSCode 的调试功能怎么使用，下面是一张调试面板的截图：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d0767e000019aeb19201080.png" alt="图片描述" data-original="http://img.mukewang.com/5d0767e000019aeb19201080.png" class="" style="cursor: pointer;"><br>
在 VSCode 中开启调试很简单，只需要下面步骤：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">打开需要调试的文件，然后在需要的地方设置添加<code>debugger</code>关键字设置断点；</p>
</li>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">按下<code>F5</code>快捷键，这时候会让选择调试项目的类型，选择后会生成一个<code>launch.json</code>文件；</p>
</li>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">修改<code>launch.json</code>文件的相关内容，主要是<code>name</code>、<code>program</code>和<code>cwd</code>三个字段，改成项目对应的配置即可。这里使用<code>${workspaceFolder}</code>这个变量，代表 VSCode 的工作路径，即当前打开项目的根目录；</p>
</li>
<li style="font-size: 20px; line-height: 38px;">
<p style="font-size: 20px; line-height: 38px;">点击 VSCode 界面左侧长得类似虫子的按钮进入 debug 面板界面，点击上图中左上角的开始三角按钮，启动调试；</p>
</li>
</ol>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d0768060001dbb001310325.png" alt="图片描述" data-original="http://img.mukewang.com/5d0768060001dbb001310325.png" class="" style="cursor: pointer;"><br>
5. 这时候就可以使用调试控制条进行调试了。左侧会显示执行上下文、变量、断点、调用栈等多个信息，跟 Chrome 的 DevTools 调试非常调试。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">调试控制条如下图所示，共有 6 个按钮，从左到右依次为下面列表及其对应的快捷键（Mac 系统）：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d07682d00012bf502160032.png" alt="图片描述" data-original="http://img.mukewang.com/5d07682d00012bf502160032.png" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">继续/暂停：<code>F5</code></li>
<li style="font-size: 20px; line-height: 38px;">单步跳过：<code>F10</code></li>
<li style="font-size: 20px; line-height: 38px;">单步调试：<code>F11</code></li>
<li style="font-size: 20px; line-height: 38px;">单步跳出：<code>⇧F11</code></li>
<li style="font-size: 20px; line-height: 38px;">重新调试：<code>⇧⌘F5</code></li>
<li style="font-size: 20px; line-height: 38px;">停止调试： <code>⇧F5</code></li>
</ul>
</div><div class="cl-preview-section"><h2 id="使用-vscode-调试-webpack" style="font-size: 30px;">使用 VSCode 调试 Webpack</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我们来动手实践下如何用 VSCode 调试 Webpack，整个调试的流程最关键的步骤是两步：</p>
</div><div class="cl-preview-section"><ol>
<li style="font-size: 20px; line-height: 38px;">寻找<code>cli.js</code>中合适的断点位置；</li>
<li style="font-size: 20px; line-height: 38px;">配置 VSCode 的<code>launch.json</code>。</li>
</ol>
</div><div class="cl-preview-section"><h3 id="寻找cli.js中合适的断点位置">寻找<code>cli.js</code>中合适的断点位置</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">首先我们知道执行<code>webpack</code>执行的文件是<code>./node_modules/webpack-cli/bin/cli.js</code>，我们需要了解下这个文件的大概执行流程，并且找出合适的断点位置。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下面我从头来分析整个<code>cli.js</code>源码寻找断点位置。这个过程我会比较详细地来讲解，我希望大家能够在我操作的过程中，学习到如何有侧重点的阅读开源的代码，既能了解整体的实现方案又能够寻找到合适的断点位置。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">先看下<code>cli.js</code>的文件大框架：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> <span class="token punctuation">{</span>NON_COMPILATION_ARGS<span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./utils/constants'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> importLocal <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'import-local'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// Prefer the local installation of webpack-cli</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">importLocal</span><span class="token punctuation">(</span>__filename<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'v8-compile-cache'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> ErrorHelpers <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./utils/errorHelpers'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">const</span> NON_COMPILATION_CMD <span class="token operator">=</span> process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>arg <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>arg <span class="token operator">===</span> <span class="token string">'serve'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            global<span class="token punctuation">.</span>process<span class="token punctuation">.</span>argv <span class="token operator">=</span> global<span class="token punctuation">.</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>a <span class="token operator">=&gt;</span> a <span class="token operator">!==</span> <span class="token string">'serve'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            process<span class="token punctuation">.</span>argv <span class="token operator">=</span> global<span class="token punctuation">.</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> NON_COMPILATION_ARGS<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span>a <span class="token operator">=&gt;</span> a <span class="token operator">===</span> arg<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>NON_COMPILATION_CMD<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./utils/prompt-command'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>NON_COMPILATION_CMD<span class="token punctuation">,</span> <span class="token operator">...</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> yargs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'yargs'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">usage</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`webpack-cli </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'../package.json'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>version<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">

Usage: webpack-cli [options]
       webpack-cli [options] --entry &lt;entry&gt; --output &lt;output&gt;
       webpack-cli [options] &lt;entries...&gt; --output &lt;output&gt;
       webpack-cli &lt;command&gt; [options]

For more information, see https://webpack.js.org/api/cli/.`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./config/config-yargs'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>yargs<span class="token punctuation">)</span><span class="token punctuation">;</span>

    yargs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> argv<span class="token punctuation">,</span> output<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 这里才是整个 bin 命令的主体</span>
        <span class="token comment">// ...</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">整个文件中，主要是使用<a href="https://github.com/yargs/yargs">Yargs</a>这个包来做 bin 命令的选项解析器。通过<code>Yargs</code>可以解析出执行的是什么命令，从而调用对应的方法做对应的事情。整个文件的主体在：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">yargs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> argv<span class="token punctuation">,</span> output<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 这里才是整个 bin 命令的主体</span>
    <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们来看下<code>yargs.parse</code>解析完 bin 命令参数之后在内部做的事情：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js">yargs<span class="token punctuation">.</span><span class="token function">parse</span><span class="token punctuation">(</span>process<span class="token punctuation">.</span>argv<span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> argv<span class="token punctuation">,</span> output<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    Error<span class="token punctuation">.</span>stackTraceLimit <span class="token operator">=</span> <span class="token number">30</span><span class="token punctuation">;</span>

    <span class="token comment">// 解析失败需要输出内容时，输出内容</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err <span class="token operator">&amp;&amp;</span> output<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span><span class="token punctuation">;</span>
        process<span class="token punctuation">.</span>exitCode <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token comment">//  help 和 version 信息</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>output<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>output<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">if</span> <span class="token punctuation">(</span>argv<span class="token punctuation">.</span>verbose<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        argv<span class="token punctuation">[</span><span class="token string">'display'</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'verbose'</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">let</span> options<span class="token punctuation">;</span>
    <span class="token keyword">try</span> <span class="token punctuation">{</span>
        <span class="token comment">// 根据命令行传入的 argv参数，生成processOptions的参数对象</span>
        options <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./utils/convert-argv'</span><span class="token punctuation">)</span><span class="token punctuation">(</span>argv<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 解析失败，输出错误信息</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">.</span>name <span class="token operator">!==</span> <span class="token string">'ValidationError'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token keyword">const</span> stack <span class="token operator">=</span> ErrorHelpers<span class="token punctuation">.</span><span class="token function">cleanUpWebpackOptions</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>stack<span class="token punctuation">,</span> err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> message <span class="token operator">=</span> err<span class="token punctuation">.</span>message <span class="token operator">+</span> <span class="token string">'\n'</span> <span class="token operator">+</span> stack<span class="token punctuation">;</span>

        <span class="token keyword">if</span> <span class="token punctuation">(</span>argv<span class="token punctuation">.</span>color<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`\u001b[1m\u001b[31m</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>message<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u001b[39m\u001b[22m`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        process<span class="token punctuation">.</span>exitCode <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
        <span class="token keyword">return</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">const</span> stdout <span class="token operator">=</span> argv<span class="token punctuation">.</span>silent
        <span class="token operator">?</span> <span class="token punctuation">{</span>
              write<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
          <span class="token punctuation">}</span> <span class="token comment">// eslint-disable-line</span>
        <span class="token punctuation">:</span> process<span class="token punctuation">.</span>stdout<span class="token punctuation">;</span>

    <span class="token keyword">function</span> <span class="token function">ifArg</span><span class="token punctuation">(</span>name<span class="token punctuation">,</span> fn<span class="token punctuation">,</span> init<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// 处理数组型的参数执行命令</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>argv<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>init<span class="token punctuation">)</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            argv<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> argv<span class="token punctuation">[</span>name<span class="token punctuation">]</span> <span class="token operator">!==</span> <span class="token string">'undefined'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">if</span> <span class="token punctuation">(</span>init<span class="token punctuation">)</span> <span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token function">fn</span><span class="token punctuation">(</span>argv<span class="token punctuation">[</span>name<span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">function</span> <span class="token function">processOptions</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment">// ... 暂时忽略</span>
    <span class="token punctuation">}</span>
    <span class="token function">processOptions</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">通过上面的代码，我们发现<code>yargs.parse</code>内部一开始主要做了一些参数解析和错误处理的事情，然后重要的是根据命令行传入的 argv 参数，生成<code>processOptions</code>的参数对象（<code>options</code>）。这时候整个内部重点变成了<code>processOptions(options)</code>的执行。下面继续看<code>processOptions</code>的函数内部实现：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们会发现，<code>processOptions</code>函数的前面，基本都是根据传入的 bin 命令参数在处理<code>outputOptions</code>。<code>outputOptions</code>是跟输出 Webpack 编译结果相关的一个参数对象，比如会显示 Webpack 执行中的错误信息，生成打包报告等，所以不是我们主要关注的。我们关注的是 Webpack 打包过程。所以类似下面的代码我们不需要细研究：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token function">ifArg</span><span class="token punctuation">(</span><span class="token string">'build-delimiter'</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    outputOptions<span class="token punctuation">.</span>buildDelimiter <span class="token operator">=</span> value<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">最后我们发现了<code>const webpack = require('webpack');</code>关键字出现了，这时候整个<code>processOptions</code>的核心代码出现了，即下面的内容：</p>
</div><div class="cl-preview-section"><pre class="  language-js"><code class="prism  language-js"><span class="token keyword">const</span> webpack <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'webpack'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> lastHash <span class="token operator">=</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> compiler<span class="token punctuation">;</span>
<span class="token keyword">try</span> <span class="token punctuation">{</span>
    compiler <span class="token operator">=</span> <span class="token function">webpack</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name">err</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">.</span>name <span class="token operator">===</span> <span class="token string">'WebpackOptionsValidationError'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>argv<span class="token punctuation">.</span>color<span class="token punctuation">)</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`\u001b[1m\u001b[31m</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>err<span class="token punctuation">.</span>message<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\u001b[39m\u001b[22m`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">else</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>err<span class="token punctuation">.</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token comment">// eslint-disable-next-line no-process-exit</span>
        process<span class="token punctuation">.</span><span class="token function">exit</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

    <span class="token keyword">throw</span> err<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">在上面代码中，<code>cli.js</code>导入了<code>webpack</code>模块依赖，然后开始执行<code>webpack(options)</code>，这时候正式进入<code>webpack</code>模块的打包流程。我们可以在<code>webpack(options)</code>之前添加一个<code>debugger</code>断点，这样调试代码的时候，执行到这里就暂停，等待调试。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">Tips：整个源码阅读流程可以大概总结为：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">首先折叠不用的分支和逻辑，只看文件大的框架代码；</li>
<li style="font-size: 20px; line-height: 38px;">寻找执行的关键路径，根据变量名称猜测变量意图，重点变量通过仔细阅读对应实现源码来验证想法；</li>
<li style="font-size: 20px; line-height: 38px;">根据关键路径顺藤摸瓜，理清整个执行过程；</li>
<li style="font-size: 20px; line-height: 38px;">了解了整个执行过程之后，进入下一个阶段阅读或者做对应的事情（比如设置断点）继续研究。</li>
</ol>
</blockquote>
</div><div class="cl-preview-section"><h3 id="修改launch.json开始调试">修改<code>launch.json</code>开始调试</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">设置完断点之后，这时候在<code>cli.js</code>页面按<code>F5</code>快捷键，选择<code>Node.js</code>环境，这时候会进入编辑<code>launch.json</code>。如果直接进入了调试模式，那么需要按照下图方式手动打开<code>launch.json</code>编辑界面：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d07687200016aed04130264.png" alt="图片描述" data-original="http://img.mukewang.com/5d07687200016aed04130264.png" class="" style="cursor: pointer;"><br>
这时候，我们根据项目的实际情况修改<code>name</code>、<code>cwd</code>、<code>program</code>配置。如果我们用 VSCode 打开的是项目之前创建的<code>webpack-debug</code>文件夹，那么<code>${workspaceFolder}</code>对应的就是<code>webpack-debug</code>的完整路径，配置内容如下：</p>
</div><div class="cl-preview-section"><pre class="  language-json"><code class="prism  language-json"><span class="token punctuation">{</span>
    <span class="token string">"version"</span><span class="token punctuation">:</span> <span class="token string">"0.2.0"</span><span class="token punctuation">,</span>
    <span class="token string">"configurations"</span><span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token string">"type"</span><span class="token punctuation">:</span> <span class="token string">"node"</span><span class="token punctuation">,</span>
            <span class="token string">"request"</span><span class="token punctuation">:</span> <span class="token string">"launch"</span><span class="token punctuation">,</span>
            <span class="token comment">// 起个名字</span>
            <span class="token string">"name"</span><span class="token punctuation">:</span> <span class="token string">"调试 webpack"</span><span class="token punctuation">,</span>
            <span class="token comment">// 工作路径</span>
            <span class="token string">"cwd"</span><span class="token punctuation">:</span> <span class="token string">"${workspaceFolder}"</span><span class="token punctuation">,</span>
            <span class="token comment">// 被调试文件的路径，以${workspaceFolder}开头</span>
            <span class="token string">"program"</span><span class="token punctuation">:</span> <span class="token string">"${workspaceFolder}/node_modules/webpack-cli/bin/cli.js"</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">经过上面配置，我们保存<code>launch.json</code>之后，就可以开始调试了，整个过程可以看下下面的动图：</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;"><img src="http://img.mukewang.com/5d102654000166e700050001.gif" alt="图片描述" data-original="http://img.mukewang.com/5d102654000166e700050001.gif" class="" style="cursor: pointer;"></p>
</div><div class="cl-preview-section"><h2 id="总结" style="font-size: 30px;">总结</h2>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节文章主要介绍了怎么使用 VSCode 的 debug 面板来调试 Webpack。其实这种方式不仅仅用于 Webpack 调试，也是 Node.js 的一种比较轻量级的调试方式。在讲解调试方法的过程中，带领大家阅读了<code>webpack-cli</code>的<code>cli.js</code>源码，通过这个过程希望大家可以掌握一种阅读开源的方法，解决面对一个开源项目源码无从下手的窘相。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">本小节相关面试题：</p>
<ol>
<li style="font-size: 20px; line-height: 38px;">怎么 debug 一个 Node.js 项目；</li>
<li style="font-size: 20px; line-height: 38px;">平时使用什么 IDE，如何调试代码？</li>
</ol>
</blockquote>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/280">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    22 为你准备了一份 Webpack 工程化最佳实践总结
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/29/article/282">
                                                    <div class="next r clearfix">
                                <p>
                                    Tapable —— Webpack 的核心模块
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">     <div class="number">精选留言 <span class="js-number">0</span></div>     <div class="comments">         <div class="input-fake js-showcommentModal">             欢迎在这里发表留言，作者筛选后可公开显示         </div>                      <div class="noData">                 <p>                     <i class="imv2-error_c"></i>                 </p>                 <p>目前暂无任何讨论</p>             </div>              </div>  </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>